<template>
  <el-tabs class="oms-table-tab-box">
    <el-tab-pane
      v-for="(item, index) in tabList"
      :key="index"
      :name="item.value"
    >
      <template #label>
        <span class="oms-table-tab-slot">
          <span class="oms-table-tab-label">{{ item.label }}</span>
          <span class="oms-table-tab-num" v-if="activeTab === item.value">
            {{ item.num || total || '' }}
          </span>
        </span>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
defineProps({
  tabList: { type: Array, default: () => [] },
  activeTab: { type: [String, Number], default: '' },
  total: { type: [Number, String], default: '' }
});
</script>

<style lang="scss" scoped>
.oms-table-tab-box {
  :deep(.el-tabs__item) {
    padding: 0;
  }
}
.oms-table-tab-label {
  font-size: 16px;
  padding: 0 30px;
}
.oms-table-tab-slot {
  position: relative;
  user-select: none;
}
.oms-table-tab-num {
  font-size: 14px;
  position: absolute;
  right: 0;
  top: -5px;
}
</style>
